class Dcharts {
  constructor() {
    this.app = {};
  }
  drawChartsOne(dom, data, chartType = 'bar') {
    let option = this.DoptionsOne(data, chartType);
    let chartDom = document.getElementById(dom);
    let existInstance = echarts.getInstanceByDom(chartDom);
    if (existInstance) echarts.dispose(existInstance);
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    });

  }
  DoptionsOne(data, chartType) {
    let xData = Object.keys(data)
    let yData = []
    for (const key in data) {
      const target = data[key]
      yData.push(target)
    }
    let labelOption = {
      show: true,
      position: this.app.config?.position,
      align: this.app.config?.align,
      verticalAlign: this.app.config?.verticalAlign,
      distance: this.app.config?.distance,
      rotate: this.app.config?.rotate,
      formatter: '{c}  {name|{a}}',
      fontSize: 16,
      rich: {
        name: {},
      },
    };
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      // legend: {
      //   data: dataName,
      // },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['line', 'bar', 'stack', 'tiled']
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          },
        },
      },
      xAxis: [{
        type: 'category',
        axisTick: {
          show: false
        },
        data: xData,
      }, ],
      yAxis: [{
        type: 'value',
      }],
      series: [{
        data: yData,
        type: chartType,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }],
    };
    return option;

  }
  drawBar(dom,data,headerTitle){
    let option = this.DoptionsBar(data,headerTitle );
    let chartDom = document.getElementById(dom);
    let existInstance = echarts.getInstanceByDom(chartDom);
    if (existInstance) echarts.dispose(existInstance);
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    });
  }

  DoptionsBar(data,headerTitle){
    console.log(data);
    let name = Object.keys(data)
    let yDataArr = []
    for(const key in data){
      let obj = {}
      obj.value = data[key]
      obj.name = key
      yDataArr.push(obj)
    }
    console.log(name);
    console.log(yDataArr);
    let option = {
      title: {
          text: headerTitle,
          subtext: '',
          left: 'center'
      },
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
          bottom: 10,
          left: 'center',
          data: name
      },
      xAxis: {
        type: 'category',
        data: name
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: yDataArr,
          type: 'bar'
      }]
  };
  return option
  }

  drawPie(dom,data,headerTitle){
    let option = this.DoptionsPie(data,headerTitle );
    let chartDom = document.getElementById(dom);
    let existInstance = echarts.getInstanceByDom(chartDom);
    if (existInstance) echarts.dispose(existInstance);
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    });
  }
  DoptionsPie(data,headerTitle){
    console.log(data);
    let name = Object.keys(data)
    let yDataArr = []
    for(const key in data){
      let obj = {}
      obj.value = data[key]
      obj.name = key
      yDataArr.push(obj)
    }
    console.log(name);
    console.log(yDataArr);
    let option = {
      title: {
          text: headerTitle,
          subtext: '',
          left: 'center'
      },
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
          bottom: 10,
          left: 'center',
          data: name
      },
      series: [
          {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: yDataArr,
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };
  return option
  }
  drawChartsTwo(dom, data, headerTitle) {
    let option = this.DoptionsTwo(data,headerTitle);
    let chartDom = document.getElementById(dom);
    let existInstance = echarts.getInstanceByDom(chartDom);
    if (existInstance) echarts.dispose(existInstance);
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
    // console.log(myChart.getDataURL());
    window.addEventListener('resize', function () {
      myChart.resize();
    });

  }
  DoptionsTwo(data, headerTitle) {

    let labelOption = {
      show: true,
      position: this.app.config?.position,
      align: this.app.config?.align,
      verticalAlign: this.app.config?.verticalAlign,
      distance: this.app.config?.distance,
      rotate: this.app.config?.rotate,
      formatter: '{c}  {name|{a}}',
      fontSize: 16,
      rich: {
        name: {},
      },
    };
    console.log("data",data);
    let legendName = Object.keys(data)
    let xData = []
    let seriesArr = []
    for (const k in data) {
      const target = data[k]
        let Yarr = []
        let obj = {};
        target.forEach((item,index)=>{
          // console.log("item",item);
          let currentKey = Object.keys(item).toString()
          xData.push(currentKey)
          const currentValue = item[currentKey]
          Yarr.push(currentValue)
        })
        obj.name = k;
        obj.type = "bar";
        obj.label = labelOption;
        obj.barGap = 0;
        obj.emphasis = {
          focus: 'series'
        };
        obj.data = Yarr;
        seriesArr.push(obj);
    }
    let xDataSet = Array.from(new Set(xData))
    let option = {
      title: {
        text: headerTitle,
        subtext: '',
        // left: 'center'
    },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: legendName,
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['line', 'bar', 'stack','pie', 'tiled']
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          },
        },
      },
      xAxis: [{
        type: 'category',
        axisTick: {
          show: false
        },
        data: xDataSet,
      }, ],
      yAxis: [{
        type: 'value',
      }],
      series:seriesArr,
    };
    return option;

  }

//多个图标
drawLayout(dom, data, headerTitle) {
  let option = this.DoptionsLayout(data,headerTitle);
  let chartDom = document.getElementById(dom);
  let existInstance = echarts.getInstanceByDom(chartDom);
  if (existInstance) echarts.dispose(existInstance);
  let myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
  // console.log(myChart.getDataURL());
  window.addEventListener('resize', function () {
    myChart.resize();
  });

}
DoptionsLayout(data,headerTitle){
  let source = []
  let tag = Object.keys(data)
  // console.log(tag);
  // console.log(data[tag])
  let tagList = Object.keys(data[tag])
  let yearList = Object.keys(data[tag][tagList[0]])
  // console.log(tagList);
  // console.log(yearList);
  yearList.unshift(tag.toString())
  source.push(yearList)
  // console.log(data[tag]);
  for(const name in data[tag]){
    let target = data[tag][name]
    console.log(target);
    let list = []
    list.push(name)
    console.log(list);
    for(const yearItem in target){
      const data = target[yearItem]
      list.push(data)
    }
    // console.log(list);
    source.push(list)
  }



  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source
    },
    series: [{
        type: 'pie',
        radius: '40%',
        center: ['25%', '30%']
        // No encode specified, by default, it is '2012'.
    }, {
        type: 'pie',
        radius: '40%',
        center: ['75%', '30%'],
        encode: {
            itemName: source[0][0],
            value: '2013'
        }
    }, {
        type: 'pie',
        radius: '40%',
        center: ['25%', '75%'],
        encode: {
            itemName: source[0][0],
            value: '2014'
        }
    }, {
        type: 'pie',
        radius: '40%',
        center: ['75%', '75%'],
        encode: {
            itemName: source[0][0],
            value: '2015'
        }
    }
    ]
};
return option
}


  Dconfig(rotate = {
    rotate: false
  }) {
    //如果是true，数据垂直90度
    if (rotate.rotate) {
      this.app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
      };
    } else {
      this.app.config = {};
    }
  }
}